<template>
	<view class="content">
		<view class="content_line">
			<view class="content_line_first">
				<view class="content_lt_view"></view>
				<view class="content_rt_view"></view>
			</view>

			<view class="context_view">
				<button
					@click="getWxQr"
					style="background-color: #d45151;border-radius: 10rpx;box-shadow: 0px 0px 5px rgba(88,88,88,0.35);
				width: 610rpx;height: 80rpx;color: #EAE0D4;font-size: 33rpx;"
				>
					{{ imageBase64 ? '保存二维码到相册' : '生成推广二维码' }}
				</button>
				<image :src="imageBase64" mode="aspectFit" v-if="imageBase64" style="width: 500rpx;height: 500rpx;"></image>

				<scroll-view
					:scroll-top="scrollTop"
					scroll-y="true"
					class="scroll-Y"
					@scrolltoupper="upper"
					@scrolltolower="lower"
					enable-flex="true"
					style="background-color: #F9F3EB; width: 610rpx;height: 300rpx; flex-grow: 1;  box-shadow: 0px 0px 5px rgba(88,88,88,0.35);border-radius: 10rpx;
				display: flex;flex-direction: column;align-items: center;margin-top: 10rpx;"
				>
					<view
						@click="open()"
						style="width: 530rpx;height: 80rpx;background-color: #F9F3EB; border-radius: 20rpx;border-style: solid;border-width: 1rpx;border-color: #CCCCCC;
				text-align: center;line-height: 80rpx; font-size: 32rpx;color: #555555;margin-top: 30rpx;"
					>
						绑定队长
					</view>

					<view
					@click="gotoUpMerchantsPage()"
						style="width: 530rpx;height: 80rpx;background-color: #F9F3EB; border-radius: 20rpx;border-style: solid;border-width: 1rpx;border-color: #CCCCCC;
				text-align: center;line-height: 80rpx; font-size: 32rpx;color: #555555;margin-top: 30rpx;"
					>
						升级为商户
					</view>

					<view
						v-for="(item, index) in friendList"
						:key="item.id"
						style="width: 530rpx;height: 145rpx; display: flex;flex-direction: column;align-items: center; margin-top: 37rpx;"
					>
						<view style="width: 530rpx;flex-grow: 1;display: flex;align-items: center;">
							<image :src="item.wxPortrait" mode="aspectFit" style="width: 95rpx;height: 95rpx;border-radius: 10px;"></image>
							<text style="font-size: 26rpx;color: #848484;margin-left: 45rpx;">{{ item.wxName }}</text>
						</view>
						<view style="width: 530rpx;height: 2rpx;background-color: #e9e0d1;"></view>
					</view>
				</scroll-view>
			</view>

			<view class="content_line_last">
				<view class="content_lb_view"></view>
				<view class="content_rb_view"></view>
			</view>
		</view>

		<!-- 弹出层 -->
		<uni-popup ref="popup" type="bindcaptain">
			<uni-popup-bind-captain type="input" message="成功消息" :duration="2000" :before-close="true" @close="close" @confirm="confirm"></uni-popup-bind-captain>
		</uni-popup>
	</view>
</template>

<script>
import helper from '@/common/helper.js';
import uniPopup from '@/components/uni-popup/uni-popup.vue';
import uniPopupMessage from '@/components/uni-popup/uni-popup-message.vue';
import uniPopupBindCaptain from '@/components/uni-popup/uni-popup-bindcaptain.vue';
var _self;
export default {
	components: {
		uniPopup,
		uniPopupMessage,
		uniPopupBindCaptain
	},
	data() {
		return {
			myUserInfo: {},
			friendList: [],
			page: 1,
			imageBase64: '',
			saveBase64: '',
			openSettingBtnHidden: true //是否授权
		};
	},
	onLoad() {
		console.log(helper.myUserInfo.wxPortrait);
		this.myUserInfo = helper.myUserInfo;
		_self = this;
		this.getList();
	},
	onShareAppMessage: function(res) {
		console.log('myid=' + helper.myUserInfo.id);
		if (res.from === 'button') {
			// 来自页面内转发按钮
		}
		return {
			title: '来测一测今日财神方位！',
			path: 'pages/homePage?commentUserId=' + helper.myUserInfo.id
		};
	},
	methods: {
		getWxQr() {
			if (this.imageBase64 != null && !this.imageBase64 == '') {
				this.saveImgToLocal();
				return;
			}
			uni.showLoading({
				title: '正在生成二维码'
			});
			let that = this;
			let goJson = {};
			goJson.commentUserId = helper.myUserInfo.id;
			var jsonStr = JSON.stringify(goJson);
			this.$request
				.get('/api/v1/getminiqrQr', {
					data: {
						jsonStr: jsonStr
					},
					dataType: 'json',
					responseType: 'application/json'
				})
				.then(res => {
					uni.hideLoading();
					
					that.imageBase64 = ('data:image/png;base64,' + res.data.data).replace(/[\r\n]/g, '');
					console.log('that.imageBase64 :>> ', that.imageBase64);
					that.saveBase64 = res.data.data.replace(/[\r\n]/g, '');
				})
				.catch(error => {
					uni.hideLoading();
					console.log('error:', error);
				});
		},
		getList() {
			console.log('获取好友');
			//把this存到这里，不然异步请求拿不到，后续用that代替this
			let that = this;
			this.$request
				.post('/api/v1/getFriendList', {
					data: {
						page: that.page
					},
					dataType: 'json',
					responseType: 'application/json'
				})
				.then(res => {
					console.log(res);

					// 		for (let index in res.data.data) {
					// 			res.data.data[index].createTime = new Date(res.data.data[index].payTime).format('yyyy-MM-dd h:m:s');
					// 		}

					that.friendList.push.apply(that.friendList, res.data.data);
				})
				.catch(error => {
					uni.hideLoading();
					console.log('error:', error);
				});
		},
		upper: function(e) {
			console.log(e);
		},
		lower: function(e) {
			console.log(e);
			this.page = this.page + 1;
			this.getList();
		},
		goTop: function(e) {
			this.scrollTop = this.old.scrollTop;
			this.$nextTick(function() {
				this.scrollTop = 0;
			});
			uni.showToast({
				icon: 'none',
				title: '纵向滚动 scrollTop 值已被修改为 0'
			});
		},
		//微信小程序保存到相册
		handleSetting(e) {
			if (!e.detail.authSetting['scope.writePhotosAlbum']) {
				_self.openSettingBtnHidden = false;
			} else {
				_self.openSettingBtnHidden = true;
			}
		},
		saveEwm: function(e) {
			//获取相册授权
			uni.getSetting({
				success(res) {
					if (!res.authSetting['scope.writePhotosAlbum']) {
						uni.authorize({
							scope: 'scope.writePhotosAlbum',
							success() {
								//这里是用户同意授权后的回调
								_self.saveImgToLocal();
							},
							fail() {
								//这里是用户拒绝授权后的回调
								_self.openSettingBtnHidden = false;
							}
						});
					} else {
						//用户已经授权过了
						_self.saveImgToLocal();
					}
				}
			});
		},
		saveImgToLocal: function(e) {
			uni.showModal({
				title: '提示',
				content: '确定保存到相册吗',
				success: function(res) {
					var fileManager = uni.getFileSystemManager();
					fileManager.writeFile({
						filePath: wx.env.USER_DATA_PATH + '/img.png', // 指定图片的临时路径
						data: _self.saveBase64, // 要写入的文本或二进制数据
						encoding: 'base64', // 指定写入文件的字符编码
						success: res => {
							console.log('写入文件成功', res);
							console.log(wx.env.USER_DATA_PATH + '/img.png');
							uni.saveImageToPhotosAlbum({
								// 保存图片到相册
								filePath: wx.env.USER_DATA_PATH + '/img.png',
								success: function(res) {
									console.log('保存成功', res);
									uni.showToast({
										title: '保存成功'
									});
								},
								fail: function(err) {
									console.log('保存失败', err);
								}
							});
						},
						file: err => {
							console.log('写入文件失败', err);
						}
					});
				}
			});
		},
		/**
		 * 点击绑定队长按钮触发
		 */
		open() {
			this.$refs.popup.open();
		},
		/**
		 * 点击取消按钮触发
		 * @param {Object} done
		 */
		close(done) {
			// TODO 做一些其他的事情，before-close 为true的情况下，手动执行 done 才会关闭对话框
			// ...
			done();
		},
		/**
		 * 点击绑定按钮触发
		 * @param {Object} done
		 * @param {Object} value
		 */
		confirm(done, value) {
			// 输入框的值
			console.log(value);
			if (value == null || value == '') {
				uni.showToast({
					title:'不能为空',
					icon:'none'
				});
				return;
			}
			// TODO 做一些其他的事情，手动执行 done 才会关闭对话框
			// 发起购买单日会员
			uni.showLoading({
				title: '绑定中'
			});
			//把this存到这里，不然异步请求拿不到，后续用that代替this
			let that = this;
			this.$request
				.get('/api/v1/bindCaptain', {
					data: {
						captainId: value
					},
					dataType: 'json',
					responseType: 'text'
				})
				.then(res => {
					uni.hideLoading();
					console.log(res)
					uni.showToast({
						title:res.data.data,
						icon:'none'
					})
				})
				.catch(error => {
					uni.hideLoading();
					console.log('error:', error);
				});

			done();
		},
		gotoUpMerchantsPage(){
			uni.navigateTo({
				url: './upMerchantsPage'
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.content {
	width: 100vw;
	height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	background: #e6dcc8;
}

.content_line {
	width: 690rpx;
	height: 95%;
	border-style: solid;
	border-width: 7rpx;
	border-color: #d45151;
	box-sizing: border-box;
	display: flex;
	justify-content: space-between;
	flex-direction: column;
}

.content_line_first {
	display: flex;
	justify-content: space-between;
}

.content_line_last {
	display: flex;
	justify-content: space-between;
}

.content_lt_view {
	width: 17rpx;
	height: 17rpx;
	background: #d45151;
}

.content_rt_view {
	width: 17rpx;
	height: 17rpx;
	background: #d45151;
}

.content_lb_view {
	width: 17rpx;
	height: 17rpx;
	background: #d45151;
	align-self: flex-end;
}

.content_rb_view {
	width: 17rpx;
	height: 17rpx;
	background: #d45151;
	align-self: flex-end;
}

.context_view {
	flex-grow: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
</style>
